<template>
    <div>
        <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="proxy.$leftClick()"/>
        <van-contact-card type="edit" :tel="(data.tel as string)" :name="data.name" @click="onEdit" v-if="Object.keys(data).length != 0"/>
        <van-contact-card type="edit" tel="请选择地址" name="请选择地址" @click="onEdit"  v-else/>
        <div class="list">
            <van-swipe-cell class="goods-item" v-for="(item, index) in chooseCarts" :key="index">
                <div class="goods-content">
                    <van-card :origin-price="item.originprice" :price="((item.originprice * item.discount) / 10).toFixed(2)"
                        :title="item.proname" class="goods-card" :thumb="item.img1">
                        <template #tags>
                            <van-tag plain type="primary">标签</van-tag>
                        </template>
                        <template #footer>
                            <span>小计 : {{ ((item.originprice * item.discount) / 10 * item.num).toFixed(2) }}</span>
                        </template>
                    </van-card>
                </div>
            </van-swipe-cell>
        </div>

        <van-submit-bar :disabled="!(chooseCarts.length > 0)"
            :price="100 * chooseCarts.reduce((prev, item) => { return prev + (item.originprice * item.discount) / 10 * item.num }, 0)"
            button-text="确认订单" @submit="onSubmit" />
    </div>
</template>

<script setup lang="ts">
import { getCurrentInstance,onBeforeMount,ref,onUnmounted} from 'vue';
import { useDingdan } from '@/store/dingdan';
import { useRess } from '@/store/ress';
import {getDefault} from '../api/ress'
import router from '@/router';
import type { AddressListAddress } from 'vant';

// 定义地址的pinia
const ress = useRess();
// 定义订单的pinia
const store = useDingdan();
// 定义全局注册的对象
const { proxy }: any = getCurrentInstance();
// 拿到购物车选择的数据列表
const chooseCarts =ref<gouwu[]>([])

// 定义地址信息
const data = ref<ress | AddressListAddress>({} as ress)

const onEdit = async(i:MouseEvent)=>{
    // 声明是确认订单信息页面到地址列表页面 打开地址点击跳转开关
    ress.changeFlagT();
    // 跳转到地址列表
    router.push({name:"set"})
}

// 当点击提交
const onSubmit =async ()=>{
    // 调用订单的接口方法 添加订单 删除选中购物车数据
    await store.fetchAdd();
    ress.huifu();
    // 跳转到订单信息列表
    router.push({name:"dingdanxingxi"})
}


onBeforeMount(async ()=>{
    // 在页面加载前
    // 购物车数据为订单pinia的dataList数据
    chooseCarts.value = store.dataList
    // 获取默认地址的数据
    let res = await getDefault(localStorage.getItem("userId") as string);
    // 如果存在默认地址
    if(res.data.length>0){
        // 一般默认地址只有一个 直接使用明日方舟
        data.value = res.data[0]
    }
    // 如果dataRess的数据本身空  dataRess的数据是从地址列表选中拿到的
    if(Object.keys(store.dataRess).length != 0){
        // 设置dataRess的数据为目前选中数据
        data.value = store.dataRess
    }
})

// 当确认订单组件消失
onUnmounted(()=>{
    // 当dataRessd的对象存在 并且开关为false 就删除选中地址
    if(store.dataRess.id && (ress.flag==false)){
        // 删除订单选中数据 改为空
        store.removeRess();
    }
})
</script>